<template>
  <vue-scroll class="forgot-password-page align-vertical">
    <div class="form-wrapper align-vertical-middle">
      <div class="form-box card-base card-shadow--extraLarge">
        <img class="image-logo" src="@/assets/images/logo.svg" alt="logo" />

        <float-label class="styled">
          <input
            ref="emailbox"
            v-validate="'required'"
            name="email"
            data-vv-as="邮箱"
            type="email"
            placeholder="邮箱"
            v-model.trim="form.email"
          />
          <span class="error">{{ errors.first('email') }}</span>
        </float-label>
        <float-label class="styled">
          <input
            ref="password"
            v-validate="'required'"
            name="password"
            data-vv-as="密码"
            type="password"
            placeholder="密码"
            v-model.trim="form.password"
          />
          <span class="error">{{ errors.first('password')}}</span>
        </float-label>

        <float-label class="styled">
          <input
            v-validate="'required|confirmed:password'"
            name="confirmpassword"
            data-vv-as="确认密码"
            type="password"
            placeholder="确认密码"
            v-model.trim="form.confirmpassword"
          />
          <span class="error">{{ errors.first('confirmpassword') }}</span>
        </float-label>

        <float-label class="styled">
          <input
            type="text"
            id="securitycode"
            v-validate="'required'"
            placeholder="验证码"
            data-vv-as="验证码"
            name="securitycode"
            v-model.trim="form.securitycode"
          />
          <div class="text-right right btnsend">
            <el-button
              size="small"
              :disabled="sendbtndisable"
              @click="sendcode"
              class="sendcode tada animated pull-right"
            >{{ sendcodetext }}</el-button>
          </div>
          <span class="error">{{ errors.first('securitycode') }}</span>
        </float-label>

        <div class="flex text-center center pt-20 pb-10">
          <el-button plain size="small" @click="resetpassword" class="send-btn tada animated">重设密码</el-button>
        </div>
      </div>
    </div>
  </vue-scroll>
</template>

<script>
export default {
  name: "ForgotPassword",
  data() {
    return {
      form: {
        email: "",
        password: "",
        confirmpassword: "",
        securitycode: ""
      },
      error: null,
      loading: false,
      sendbtndisable: false,
      sendcodetext: "获取验证码"
    };
  },
  methods: {
    sendcode() {
      this.$validator.validate("email").then(valid => {
        if (!valid) {
          return;
        } else {
          this.axios
            .post(
              "/api/account/sendresetpasswordvalidationcode",
              "email=" + this.form.email
            )
            .then(response => {
              this.$message({
                message: "验证码发送成功",
                type: "success"
              });
            });

          const TIME_COUNT = 60; //更改倒计时时间

          if (!this.timer) {
            var that = this;
            that.count = TIME_COUNT;
            that.sendcodetext = "获取验证码" + "(" + this.count + ")";
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                that.sendbtndisable = true;
                that.count--;
                that.sendcodetext = "获取验证码" + "(" + this.count + ")";
              } else {
                that.sendbtndisable = false;
                that.sendcodetext = "获取验证码";
                clearInterval(this.timer); // 清除定时器
                this.timer = null;
              }
            }, 1000);
          }
        }
      });
    },
    resetpassword() {
      this.$validator.validate().then(valid => {
        if (!valid) {
          // do stuff if not valid.
          return;
        } else {
          this.axios
            .post("/api/account/resetpassword", this.form)
            .then(response => {
              this.$message({
                message: "重设密码成功",
                type: "success"
              });
              this.$router.push("/login");
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../../assets/scss/_variables";

.forgot-password-page {
  background: $text-color;
  margin-left: -30px;
  margin-right: -30px;
  #securitycode {
    width: 160px;
  }
  .btnsend {
    margin-top: -30px;
  }

  input:-internal-autofill-selected {
    -webkit-text-fill-color: #807c7c !important;

    transition: background-color 5000s ease-out 0.5s !important;
  }
  input {
    font-size: 12px !important;
  }
  input:valid {
    border-color: green;
  }

  input:invalid {
    border-color: red;
  }
  .error {
    color: #d7195d;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }
  .form-wrapper {
    width: 100%;
  }

  .form-box {
    width: 100%;
    max-width: 340px;
    padding: 30px;
    box-sizing: border-box;
    margin: 20px auto;

    a {
      font-size: 14px;
      color: $text-color-accent;
      text-decoration: none;
      font-weight: 500;
    }

    .image-logo {
      width: 80px;
      margin: 0px auto;
      margin-bottom: 50px;
      display: block;
    }

    .send-btn {
      width: 160px;
      background: rgba($text-color-accent, 0.2);
      color: $text-color;
      border-color: $text-color;
      border-width: 2px;
      font-weight: bold;
      border-radius: 0;

      &:hover {
        background: rgba($text-color-accent, 0.4);
        border-color: $text-color;
        color: $text-color;
      }
    }
  }
}

@media (max-width: 768px) {
  .layout-container .container .view.forgot-password-page {
    margin-left: -5px;
    margin-right: -5px;
    max-width: calc(100% + 10px);
  }
}
</style>
